<template>
  <a-layout style="height: 220vh;">

    <a-layout-content style="background-color: #F2F2E6">
      <br><br><br>
      <div>
        <!--    步骤条    -->
        <guide-stepper v-if="isShow"/>

        <v-row>
          <v-col cols="12" lg="1">
            <guide-record/>
          </v-col>
          <v-col cols="12" lg="10" style="text-align: center">
            <img src="../../public/images/think-a.png"
                 style="width: 220px; height: 200px; margin-top: 80px"
                 alt=""/>
          </v-col>
          <v-col cols="12" lg="1"></v-col>
        </v-row>


        <p align="center"
           style="font-family: '华文楷体',sans-serif; margin-top: 50px; font-size: 35px; color: #89B8CA; font-weight: bolder">
          在这里把您的问题转化成具体的功能模型，并在右侧生成您的专属解决途径。
        </p>
        <introduction style="margin-bottom: 10vh; margin-top: 3vh"/>

        <v-row>
          <v-col cols="8">
            <v-card
              elevation="4"
              shaped
              tile
              style="padding: 10px 10px 30px; height: 114vh; margin-left: 10px"
              color="au_white"
            >
              <graph-tool ref="toolContainer"></graph-tool>
              <div style="text-align: center; margin-top: 20px;">
                <v-btn
                  elevation="6"
                  rounded
                  large
                  color="main_1"
                  @click="Step2Submit"
                  style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4; margin-top: 10px"
                >
                  <span>生成解决途径</span>
                  &nbsp;
                  <a-icon type="double-right" />

                </v-btn>

              </div>
            </v-card>
          </v-col>
          <v-col cols="4">
            <v-card
              ref="solution"
              elevation="4"
              shaped
              tile
              style="padding-bottom: 10px; height: 114vh; padding-top: 10px; margin-right: 8px"
              color="au_white"
            >
              <selectable-direction-list :focus="focus" ref="directionList" :directions="directions" v-on:select="receive"></selectable-direction-list>

              <div style="text-align: center; margin-top: 30px">
                <v-btn
                  elevation="6"
                  rounded
                  large
                  :disabled="selectedDir.length === 0"
                  color="main_1"
                  @click="Step3Submit"
                  style="font-family: '华文楷体',sans-serif; font-weight: bold; font-size: 15px; color:#FFFAF4;"
                >
                  <span>智能专利搜索</span>
                  &nbsp;
                  <a-icon type="double-right" />

                </v-btn>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <!--    创新方向    -->

      </div>
      <div>
        <a-back-top />
      </div>
    </a-layout-content>
  </a-layout>

</template>

<script>
  import request from "../utils/request";
  import GuideStepper from '../components/Stepper'
  import GraphTool from '../components/GuideGraphTool'
  import Introduction from '../components/Introduction'
  import SelectableDirectionList from  '../components/SelectableDirectionList'
  import GuideRecord from "../components/GuideRecord"
  export default {
    name: 'guidance_model',
    components: {
      GuideStepper, Introduction, GraphTool, SelectableDirectionList, GuideRecord
    },
    data() {
      return {
        guide: {},
        isShow: true,
        directions: [],
        selectedDir: []
      }
    },
    computed: {
    },
    created() {
      this.$store.state.currentStep = 1
      this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
    },
    activated() {
      this.$store.state.currentStep = 1
    },
    mounted() {

    },
    beforeRouterEnter(to, from, next) {
      next((vm) => {
        vm.isShow = true;
      });
    },
    beforeRouterLeave(to, from, next) {
      this.isShow = false;
      next();
    },
    // beforeDestroy() {
    //   sessionStorage.removeItem('graph')
    //   sessionStorage.removeItem('selectableNodes')
    // },
    methods: {
      receive(selected){
        this.selectedDir = []
        for (let i = 0; i < selected.length; i++){
          this.selectedDir.push(this.directions[selected[i]])
        }
        // this.selectedDir = selected

        // console.log(this.selectedDir)
      },
      focus(){
        this.$refs.toolContainer.focusOnNode('1')
        this.$vuetify.goTo(0, {
          duration: 1000,
          offset: -700,
          easing: 'easeInOutCubic',
        })
      },
      async Step2Submit(){
        this.$store.state.currentStep = 2
        await request.post("/guide/createDirection",  {
            jsonString: sessionStorage.getItem('graph')
          }).then(res => {
          this.directions = res.data
        })
        await this.$refs.directionList.loadDirection()
        this.sendSuccessMessage('解决途径生成成功')
        this.$vuetify.goTo(this.$refs.solution, {
          duration: 800,
          offset: 60,
          easing: 'easeInOutCubic',
        })

      },
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {this.confirm()}
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {this.confirm()}
      },
      confirm(){
        if (sessionStorage.getItem('guideId'))
          sessionStorage.removeItem('guideId')
        if (sessionStorage.getItem('graph'))
          sessionStorage.removeItem('graph')
        if (sessionStorage.getItem('selectableNodes'))
          sessionStorage.removeItem('selectableNodes')
        this.$router.push('/personal/guide')
      },

      Step3Submit(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200'){
            this.$store.state.currentStep = 3
            this.guide.userId = -1
            this.guide.id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            this.guide.model = sessionStorage.getItem('graph')
            this.guide.direction = JSON.stringify(this.selectedDir)
            if (this.$store.state.maxStep < 3)
              this.guide.process = 3
            request.post("/guide", this.guide).then(res => {
              if (res.code === '200') {
                this.sendSuccessMessage(res.msg)
                this.$router.push('/intelligent_guidance/retrieval')
              }
            })
          }
          else this.confirm()
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ant-card{
    border-radius: 18px !important;
  }

</style>
